<template>
	<view class="goodsParagraph">
		<!-- 头部 -->
		<view class="top_box">
			<view class="title flex-r-s-c">
				<image src="/static/mine/wdxm_icon.png" mode="widthFix"></image>
				<view class="text">{{objData.store_name}}</view>
			</view>
			<view class="money flex-r-b-c">
				<view>货款余额</view>
				<view>{{objData.goods_price}}元</view>
			</view>
		</view>
		
		<!-- 其他门店货款 -->
		<view class="list flex-r-b-c" style="margin: 20rpx 0rpx;">
			<view class="list_l">其他门店货款余额累计</view>
			<view class="list_r" style="color: #FF6C1D; font-size: 28rpx;">{{objData.arrears == 0 ? objData.arrears : '-' + objData.arrears }}</view>
		</view>

		<!-- 详情列表 -->
		<view class="list flex-r-b-c" v-for="(item,index) in objData.idePrice" :key="index">
			<view class="list_l">{{item.name}}</view>
			<view class="list_r">-{{item.goods_price}}</view>
		</view>

		<!-- 支付按钮 -->
		<view class="btn" v-if="objData.arrears == 0" style="background-color: #CCCCCC; color: #FFFFFF; font-size: 28rpx; font-weight: 500;" >支付应付货款</view>
		<view class="btn" v-else @tap.stop="isPaymentShow = true">支付应付货款</view>
		
		<!-- 支付弹框 -->
		<u-popup class="paymentPop" v-model="isPaymentShow" mode="bottom" border-radius="30" length="40%">
			<view class="text" style="margin-top: 100rpx; font-size: 32rpx; color: #4A4A4A;">确认支付</view>
			<view class="text" style="margin-top: 60rpx;">确认使用账户余额支付</view>
			<view class="text" style="margin-top: 20rpx;">应付货款4500.00元？</view>
			
			<view class="btn_box flex-r-a-c" style="margin-top: 80rpx;">
				<view class="btn_l" @tap.stop="isPaymentShow = false">再想想</view>
				<view class="btn_r">确认</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPaymentShow: false,
				objData: {}
			};
		},
		onLoad() {
			this.getMygoodsParagraph() // 获取我的货款
		},
		methods:{
			// 获取我的货款
			getMygoodsParagraph(){
				let that = this
				that.$api.getMygoodsParagraph().then(res => {
					console.log(res)
					that.objData = res.data.data
				})
			}
		}
	}
</script>

<style lang="less">
	.goodsParagraph {
		width: 100vw;

		.top_box {
			width: 100%;

			.title {
				box-sizing: border-box;
				padding: 0 40rpx;
				height: 76rpx;
				background-color: #45806E;

				image {
					width: 38rpx;
					height: 38rpx;
				}

				.text {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.money {
				height: 114rpx;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 0 40rpx;
				color: #45806E;
				font-size: 32rpx;
				font-weight: 500;
			}
		}

		.list {
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			padding: 0 40rpx;
			background-color: #FFFFFF;

			.list_l {
				font-size: 28rpx;
				font-weight: 400;
			}

			.list_r {
				font-size: 32rpx;
				font-weight: 500;
			}
			
		}
		
		.border_t{
			border-top: 1px solid #F2F2F2;
		}
		
		.btn{
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: #45806E;
			font-size: 28rpx;
			font-weight: 500;
			position: fixed;
			left: 50%;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			transform: translateX(-50%);
		}
		.paymentPop{
			.text{
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #8B8B8B;
			}
			.btn_box{
				font-size: 32rpx;
				color: #FFFFFF;
				.btn_l{
					width: 30%;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					border-radius: 72rpx;
					background-color: #CCCCCC;
				}
				.btn_r{
					width: 30%;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					border-radius: 72rpx;
					background-color: #45806E;
				}
			}
		}
	}
</style>
